'use strict';

import React from 'react';
import { connect } from 'react-redux';
import { Link} from 'react-router';
import * as actions from '../../actions/zhekou1_list';
import * as edit_items_actions from '../../actions/zhekou1_edit_items';
import { Button,Icon,Dialog,Pagination,Search,Form,Loading,Menu,Tab,DatePicker} from 'qnui';
import Radio,{ Group as RadioGroup } from 'qnui/lib/radio';
import { Row, Col } from 'qnui/lib/grid';
import Step, { Item as StepItem } from 'qnui/lib/step';
import { RangePicker } from 'qnui/lib/date-picker';
import ZhekouTags from 'components/zhekou-tags/index';
import MainNotice from 'components/main-notice/index';
import SystemDialog from 'components/system-dialog/index';
import Tools from 'utils/index';
import linkConfig from 'utils/urls';
import './index.scss';
const links = Tools.isLocal() ? linkConfig.local : linkConfig.onLine;
class Zhekou1List extends React.Component {
    constructor(props) {
        super(props);
		this.dispatch = this.props.dispatch;
        this.state = {
			refreshDialog:false,
			refreshContent:"",
			currentPage:1,
			pageSize:10,
			editActive:false,
			overlayVisible:false,
			tagName:"",
			active:false,
			start_time:false,
			end_time:false
        };
		this.dispatch(
			edit_items_actions.clearList()
		);
    }
	componentWillMount(){
		this.dispatch(
			actions.getList({
				page:1,
				page_size:this.state.pageSize,
				item_area:"some"
			})
		);
	}
	onCloseSystemDialog(){
		this.setState({"refreshDialog":false,"orderDialog":false});
		this.props.dispatch(actions.closeDialog());
	}
	handleCheckStatus(){
		return;
	}
	handlePageChange(page){
		this.setState({"currentPage":page});
		this.dispatch(
			actions.getList({
				page:page,
				page_size:this.state.pageSize,
				item_area:"some"
			})
		);
	}
	handlePageSizeChange(size){
		this.setState({"currentPage":1,"pageSize":size});
		this.dispatch(
			actions.getList({
				page:1,
				page_size:size,
				item_area:"some"
			})
		);
	}
	handleEditActive(active){
		this.setState({
			editActive:true,
			tagName:active.name,
			start_time:false,
			end_time:false,
			overlayVisible:false,
			active
		});
	}
	onEditOk(){
		if(this.state.tagName!=this.state.active.name || this.state.start_time || this.state.end_time){
			// 有任何一样重设则提交请求，否则关闭对话框
			this.dispatch(
				actions.editActive({
					activity_id : this.state.active.activity_id,
					name : this.state.tagName?this.state.tagName:this.state.active.name,
					description : this.state.active.description,
					start_time : this.state.start_time? this.state.start_time:this.state.active.start_time,
					end_time : this.state.end_time? this.state.end_time:this.state.active.end_time
				})
			);
		}else{
			this.setState({overlayVisible:false,editActive:false});
		}
	}
	onEditCancel(){
		this.setState({editActive:false});
	}
	setTag(tagName){
		this.setState({tagName,overlayVisible:false});
	}
	searchResult(hasTag,isPrefect){
		this.setState({"hasTag":hasTag,"isPrefect":isPrefect});
	}
	handleShowSearchTag(){
		this.setState({overlayVisible:true});
	}
	setStartTime(start_time){
		this.setState({start_time});
	}
	setEndTime(end_time){
		this.setState({end_time});
	}
	removeActive(activity_id){
		Dialog.confirm({
			content:"确定要删除这个折扣吗？",
			onOk:()=>{
				this.dispatch(
					actions.removeActive(activity_id)
				);
			}
		});
	}
	tabChange(tab_id){
		switch(tab_id){
			case "countdown":	
				　window.location.href=links.ring_tags;
				break;
			case "limit_time":
				break;
			case "mjs1":
				 window.location.href=links.mjs1_list;
				break;
			case "limit_buy":
				 window.location.href=links.limit_buy;
				break;
			case "qrring":
				 window.location.href=links.qrring;
				break;
		}
	}
  render() {

	const data = this.props.zhekou1_list.data;
	const activitys = data?data.activity_list.common_item_activity:[];
	const total = data?parseInt(data.total_count):0;
	const noneMsg = total?"":<Row justify="center">没有任何折扣</Row>;
	
	const tags = <ZhekouTags 
					setTag={this.setTag.bind(this)}	
					search={this.state.search}
					searchResult={this.searchResult.bind(this)}
					curTag={this.state.tagName}
				/>
	const extraContent = <Row>
								    <Button size="large" type="primary" component="a" href="http://www.alibaba.com" target="_blank">
								    <Icon type="pin" /><span>店内打折</span>
									</Button> &nbsp;&nbsp;
									<Button size="large" type="secondary" component="a" href="http://www.alibaba.com" target="_blank">
									    <span>推广打折</span>
									</Button>
								</Row>;
	return (
        <div className="page1-page">
        <MainNotice />
        <SystemDialog 
		 		 loginError={this.props.zhekou1_list.loginError}
			    creating={this.props.zhekou1_list.creating}
			    message={this.props.zhekou1_list.message}
			    error={this.props.zhekou1_list.error}
				 refreshDialog={this.state.refreshDialog}
				 orderDialog={this.state.orderDialog}
		 		 onCloseDialog={this.onCloseSystemDialog.bind(this)}
		 			/>
			<Dialog style={{width:"680px"}} 
					visible = {this.state.editActive}
                    onOk = {this.onEditOk.bind(this)}
                    onCancel = {this.onEditCancel.bind(this)}
                    onClose = {this.onEditCancel.bind(this)} 
					title = "修改折扣"
					>
					<Row justify="center">
						<Col span="21">
							<Search 
								size="large"
								 placeholder="选择标签"
								 type="normal"
								 combox={tags}
								 overlayVisible={this.state.overlayVisible}
								 value={this.state.tagName}
								 hasIcon={false}
								 searchText="　"
								 autoWidth
								 className="tagSearch"
								 onSearch={()=>{}}
								 onClick={this.handleShowSearchTag.bind(this)}
							/>
						</Col>
					</Row>
					<Row justify="center">
					    <Form labelAlign="inset" span="21">
							<Col span="12">
								<Form.Item label="开始"><DatePicker size="large" defaultValue={Date.parse(this.state.active.start_time)} onChange={this.setStartTime.bind(this)} placeholder="选择开始时间" showTime/></Form.Item>
							</Col>
							<Col span="12">
								<Form.Item label="结束"><DatePicker size="large" defaultValue={Date.parse(this.state.active.end_time)} onChange={this.setEndTime.bind(this)} placeholder="选择结束时间"showTime/></Form.Item>
							</Col>
						</Form>
					</Row>
            </Dialog>
            <Tab size="medium" type="wrapped" className="my-tab-bar" activeKey="limit_time" tabBarExtraContent={extraContent}  style={{marginTop:"5px"}} onChange={this.tabChange.bind(this)}>
            <Tab.TabPane tab="付款倒计时折扣" key="countdown"></Tab.TabPane>
		    <Tab.TabPane tab="二维码倒计时" key="qrring"></Tab.TabPane>
			{/*<Tab.TabPane tab="循环定时打折" key="daily_loop"></Tab.TabPane>
			<Tab.TabPane tab="付款打折" key="pay"></Tab.TabPane>*/}
            <Tab.TabPane tab="限时打折" key="limit_time">
					<Row style={{padding:"0"}}>
							<Col span="12">
							{/*
								<RadioGroup defaultValue="onseal" onChange={this.handleCheckStatus.bind(this)}>
									<Radio id="all" value="all">全部</Radio>
									<Radio id="runing" value="runing">进行中</Radio>
									<Radio id="waitting" value="waitting">未开始</Radio>
									<Radio id="stoped" value="stoped">已结束</Radio>
								</RadioGroup>
							*/}
							<Button.Group>
								<Link to={"zhekou1_all_in_list"}><Button type="secondary">全店打折</Button></Link>
								<Link to={"zhekou1_list"}><Button type="primary">单品打折</Button></Link>
								<Link to={"zhekou1"}><Button type="secondary">创建活动</Button></Link>
					      </Button.Group>
							</Col>
							<Col span="12">
								 <Pagination current={this.state.currentPage} total={total} pageSize={this.state.pageSize} pageSizeList={[10,20,30]} pageSizeSelector="dropdown" type="simple" onChange={this.handlePageChange.bind(this)} onPageSizeChange={this.handlePageSizeChange.bind(this)} />
							</Col>
					</Row>
					<Row align="center" className="list">
						<Col>
							活动标签
						</Col>
						<Col>
							范围
						</Col>
						<Col>
							描述
						</Col>
						<Col>
							开始时间
						</Col>
						<Col>
							结束时间
						</Col>
						<Col fixedSpan="4">
						状态
						</Col>
						<Col fixedSpan="5">
						操作
						</Col>
						<Col fixedSpan="5">
						管理
						</Col>
					</Row>
					{noneMsg}
					{activitys.map((active,key)=>{
						let time = new Date();
						let start_time = new Date(active.start_time);
						let end_time = new Date(active.end_time);
						let is_waitting = time.getTime()<start_time.getTime();
						let is_end = time.getTime()>end_time.getTime();
						let statu = is_waitting?"未开始":(is_end?"已结束":"进行中");
						let color = is_waitting?"#3089DC":(is_end?"#C7C7C7":"#1BB11B");
						const menu = <Menu>
										<Menu.Item key={active.activity_id} onClick={this.removeActive.bind(this)}>删除</Menu.Item>
									</Menu>
						return(
						<Row key={key} align="center" className="list" style={{color:color}}>
							<Col>
								<Link to={"/zhekou1_edit_items?activity_id="+active.activity_id}>{active.name}</Link>
							</Col>
							<Col>
							</Col>
								{active.item_area}
							<Col>
								{active.description}
							</Col>
							<Col>
								{active.start_time}
							</Col>
							<Col>
								{active.end_time}
							</Col>
							<Col fixedSpan="4">
								{statu}
							</Col>
							<Col fixedSpan="5">
								<Button.Split size="small" type="secondary" menu={menu} onClick={this.handleEditActive.bind(this,active)}>修改</Button.Split>
							</Col>
							<Col fixedSpan="5">
								<Link to={"/zhekou1_edit_items?activity_id="+active.activity_id}><Button shape="ghost" >查看商品</Button></Link>
							</Col>
						</Row>
						)
					})}
					</Tab.TabPane>
				    <Tab.TabPane tab="满打折/包邮" key="mjs1"></Tab.TabPane>
				    <Tab.TabPane tab="限购优惠" key="limit_buy"></Tab.TabPane>
				    {/*<Tab.TabPane tab="预热折扣" key="5"></Tab.TabPane>*/}
				  </Tab>
        </div>
    );
  }
}


export default connect((state)=> {
  return {
    zhekou1_list: state.zhekou1_list
  };
})(Zhekou1List);
